<!--
 * @Author: restart 2425792130@qq.com
 * @Date: 2024-05-29 11:35:57
 * @LastEditors: restart 2425792130@qq.com
 * @LastEditTime: 2024-07-11 17:13:36
 * @FilePath: \vue-shelf\src\App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
 <div>
    <canvas ref="canvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing"  width="300" height="200"></canvas>
    <div>
      <button @click="clearCanvas">清除</button>
      <button @click="saveSignature">保存</button>
    </div>
  </div>
  <img :src=state.img alt="">

  <h1>测试</h1>
  <div class="loginState">
    <el-input placeholder="请输入用户名" v-model="formState.username" />
    <el-input placeholder="请输入密码" type="password" v-model="formState.password" />
    <el-checkbox v-model="formState.rememberMe" label="记住密码" size="large" />
    <el-button type="primary" @click="userLogin">登录</el-button>
  </div>
</template>

<script setup lang="ts">
// 获取canvas = document
import {ref, onMounted,reactive} from 'vue'
import { Base64 } from 'js-base64';
const canvas = ref()
const state = reactive({
  img:''
})
const formState = reactive({
  username: '',
  password: '',
  captcha:'',
  rememberMe: false,
});

// 设置cookie
const setCookie = (username:string, password:string, days:any) =>{
  let date = new Date(); // 获取时间
	       date.setTime(date.getTime() + 24 * 60 * 60 * 1000 * days); // 保存的天数
	       // 字符串拼接cookie
	       window.document.cookie =
	           "userName" + "=" + username + ";path=/;expires=" + date.toString();
	       window.document.cookie =
	        "password" + "=" + password + ";path=/;expires=" + date.toString();
}

const getCookie = () => {
  if (document.cookie.length > 0) {
	         //分割成一个个独立的“key=value”的形式
	         let arr = document.cookie.split("; ");
	         for (let i = 0; i < arr.length; i++) {
	           // 再次切割，arr2[0]为key值，arr2[1]为对应的value
	           let arr2 = arr[i].split("=");
	           if (arr2[0] === "userName") {
              formState.username = arr2[1];
	           } else if (arr2[0] === "password") {
              formState.password = Base64.decode(arr2[1]);// base64解密
              formState.rememberMe = true;
	           }
	         }
	       }
}

    const userLogin = async () => {
        if (formState.username == '') {
            console.log('密码')
            return
        } else if (formState.password == '') {
          console.log('密码')
            return
        } else {
          if (formState.rememberMe === true) {
	             let password = Base64.encode(formState.password); // base64加密
	             setCookie(formState.username, password, 7);
	           } else {
	             setCookie("", "", -1); // 修改2值都为空，天数为负1天就好了
	           }
        }
    }


const isDrawing = ref(false)
const ctx = ref()
onMounted(() =>{
  const context  = canvas.value
  ctx.value = context.getContext('2d')
  getCookie()
})
const startDrawing = (event:any) =>{
  isDrawing.value = true
  const { offsetX, offsetY } = event
  ctx.value.beginPath()
  ctx.value.moveTo(offsetX, offsetY)
}

const draw =(event:any)=> {
      if (!isDrawing.value) return; // 如果没有在绘制中，则返回
      const { offsetX, offsetY } = event; // 获取鼠标相对于Canvas的偏移量
      ctx.value.lineTo(offsetX, offsetY); // 绘制路径
      ctx.value.stroke(); // 绘制路径的边框
    }
// 当鼠标松开时触发，用于停止绘制签名
const stopDrawing = () =>{
  isDrawing.value = false; // 停止绘制
}


// 清除
const clearCanvas =() => {
      ctx.value.clearRect(
        0,
        0,
        canvas.value.width,
        canvas.value.height
      ); // 清除Canvas上的内容
}
// 保存
const saveSignature=()=> {
      const dataURL = canvas.value.toDataURL(); // 获取签名图片的Base64编码
      // 在这里可以将dataURL发送到服务器保存，或者进行其他操作
      console.log(dataURL); // 输出签名的Base64编码到控制台
      state.img = dataURL
}
</script>




<style scoped>
canvas {
  border: 1px solid red;
}
</style>